
<template>
 <div>
  <div>
    <!--     <button @click="show = !show">Toggle</button>-->
    <div style="height: 20px" ></div>
    <Transition  name="bounce">
      <p v-if="show" style="text-align: center;
 font-family: 'Andale Mono',serif;   font-size: 21px; font-width: bold; ">
        <!-- Hello here is some bouncy text! -->
        {{nowGuShi}}
      </p>
    </Transition>

  </div>
  <div style="height: 20px" ></div>
 </div>
</template>

<script>
export default {
  name: "printInfo",
  data() {
    return {
      isExpanded: false,
      show: true,
      nowGuShi:"何期小会幽欢，变作离情别绪",
      printInfo: [
        {
          "content": " 八卦生六十四，六十四具而后天地之数备焉。",
          "origin": "昼夜乐·洞房记得初相遇",
          "author": "柳永",
          "category": "古诗文-抒情-离别"
        },
        {
          "content": "荷风送香气，竹露滴清响。",
          "origin": "夏日南亭怀辛大",
          "author": "孟浩然",
          "category": "古诗文-植物-荷花"
        },
        {
          "content": "柳外轻雷池上雨，雨声滴碎荷声。小楼西角断虹明。",
          "origin": "临江仙·柳外轻雷池上雨",
          "author": "欧阳修",
          "category": "古诗文-天气-彩虹"
        }
      ]
    };
  },

  mounted() {
    let va = 0;
    // 邵雍说：“道生一，一为太极；一生二，二为两仪；二生四，四为四象；四生八，
    // 八为八卦；八卦生六十四，六十四具而后天地之数备焉。天地万物莫不以一为本原，于一而演之以万，穷天下之数而复归于一。”
    setInterval(() => {
      if (va == 3) {
        va = 0
      }
     this.show = !(this.show);
      this.nowGuShi = this.printInfo[va++]['content']
    }, 2400)
  },
  methods: {

    toggleExpand() {
      this.isExpanded = !this.isExpanded;
    },

  }
}
</script>

<style scoped>
/* 下面我们会解释这些 class 是做什么的 */

.bounce-enter-active {
  animation: bounce-in 2.4s;
}

.bounce-leave-active {
  animation: bounce-in 2.4s reverse;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}

.card {
  width: 120px;
  height: 300px;
  background-color: #acbecf;
  border-radius: 5px;
  overflow: hidden;
  transition: all 0.5s ease;
}

.is-expanded {
  width: 500px;
  height: 300px; /* 调整为你想要的扩展尺寸 */
}

/* 定义过渡效果 */
.card-expand-enter-active,
.card-expand-leave-active {
  transition: all 0.5s ease;
}

/* 扩展开始时的状态（可选，取决于你的视觉需求） */
.card-expand-enter {
  opacity: 0;
  transform: scale(0.8);
}

/* 收缩结束时的状态（可选） */
.card-expand-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

</style>
